<template>
  <div class="clearfix" style="width: 100%;height: 100%">
    <div class="pc_centeritem" ref="zhongliang">1</div>
    <div class="pc_centeritem" ref="shuliang">2</div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
})
const zhongliang = ref(null);
const createCharts_1 = ()=>{
  const chartInstance = echarts.init(zhongliang.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月废品重量',
      left:'50px',
      textStyle:{
        color:'#ffffff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{a} <br/>{b} : {c}吨 ({d}%)',
    },
    legend: {
      orient: 'vertical',
      bottom: '20px',
      left: '5px',
      textStyle:{
        color:'#00fbea'
      }
    },
    series: [{
      name: '重量',
      type: 'pie',
      radius: '50%',
      center: ['50%', '40%'], //调整饼图位置
      label: {
        show: true, // 显示数值
        color:"#00fbea",
        formatter:function (param){
          if(param&&param.value>0){
            return   `${param.value}吨`;
          }else {
            return param.name + ":0吨"
          }
        },
        position: 'inside' // 在顶部显示
      },
      data: [
        { value: 36.3, name: '风能装备' },
        { value: 28.3, name: '核能装备' },
        { value: 17.9, name: '海工装备' },
        { value: 8.3, name: '调质钢' },
        { value: 27.5, name: '传动装备' }
      ],
    }]
  };
  chartInstance.setOption(option);
}
const shuliang = ref(null);
const createCharts_2 = ()=>{
  const chartInstance = echarts.init(shuliang.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月废品次数',
      right:'50px',
      textStyle:{
        color:'#ffffff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      bottom: '20px',
      right: '10px',
      textStyle:{
        color:'#00fbea'
      }
    },
    series: [{
      name: '次数',
      type: 'pie',
      radius: '50%',
      center: ['50%', '40%'], //调整饼图位置
      label: {
        show: true, // 显示数值
        color:"#00fbea",
        formatter:function (param){
          if(param&&param.value>0){
            return   `${param.value}次`;
          }else {
            return param.name + ":次"
          }
        },
        position: 'inside' // 在顶部显示
      },
      data: [
        { value: 2, name: '风能装备' },
        { value: 2, name: '核能装备' },
        { value: 1, name: '海工装备' },
        { value: 1, name: '调质钢' },
        { value: 3, name: '传动装备' }
      ],
    }]
  };
  chartInstance.setOption(option);
}

onMounted(()=>{
  createCharts_1();
  createCharts_2();
})
</script>

<style lang="less" scoped>
.pc_centeritem{
  width: 50%;
  height: 100%;
  float: left;
}
</style>
